<template>
  <el-row justify="center">
    <el-col :span="15">
      <h1>基本信息</h1>
      <el-form ref="form" :model="form" label-width="100px" label-position="right">
        <el-form-item label="项目名称">
          <el-col :span="11">
            <template v-if="editable">
              <el-input v-model="form.name"></el-input>
            </template>
            <template v-else>
              {{form.name}}
            </template>
          </el-col>
        </el-form-item>
        <el-form-item label="项目起止日期">
          <template v-if="editable">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="开始日期" v-model="form.startDate"
                              style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                              @change="dateChange"></el-date-picker>
            </el-col>
            <el-col :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="结束日期" v-model="form.endDate"
                              style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                              @change="dateChange"></el-date-picker>
            </el-col>
          </template>
          <template v-else>
            {{ moment(form.startDate).format('YYYY-MM-DD') }} 至 {{ moment(form.endDate).format('YYYY-MM-DD') }}
          </template>
        </el-form-item>
        <el-form-item label="培训人数">
          <el-col :span="11">
            <template v-if="editable">
              <el-input v-model="form.people" type="number"></el-input>
            </template>
            <template v-else>
              {{form.people}}
            </template>
          </el-col>
        </el-form-item>
        <el-form-item label="培训承办部门">
          <template v-if="editable">
            <el-select v-model="form.part.id" placeholder="请选择部门">
              <el-option v-for="item in parts" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </template>
          <template v-else>
            {{partName(form.part.id)}}
          </template>
        </el-form-item>
        <el-form-item label="承办人">
          <template v-if="editable">
            <el-select v-model="form.userName" placeholder="请选择承办人">
              <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </template>
          <template v-else>
            {{form.userName}}
          </template>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";
import moment from "moment";
export default {
  name: "BasicInfoForm",
  props: {
    modelValue:Object,
    editable:Boolean
  },
  emits:['next','back','update:modelValue'],
  data() {
    return {
      parts:[{
        id:1,
        name:"社会培训学院"
      }],
      users:[{
        id:0,
        name:"test"
      }]
    }
  },
  computed:{
    form:{
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },
  },
  methods:{
    findAllPart(){
      return axios.get(this.$host+'/part').then(response=>{
        if(response.data.code === 0){
          this.parts = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllUser(){
      return axios.get(this.$host+'/user').then(response=>{
        if(response.data.code === 0){
          this.users = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    dateChange(){
      this.$emit("change");
    },
    moment(date){
      return moment(date);
    },
    partName(id){
      let element = this.parts.find((curValue)=>{
        return curValue.id === id;
      })
      if(element){
        return element.name;
      }
      return "";
    },
    // getUserName(id){
    //   let element = this.users.find((curValue)=>{
    //     return curValue.id === id;
    //   })
    //   if(element){
    //     return element.name;
    //   }
    //   return "";
    // }
  },
  created() {
    this.findAllPart();
    this.findAllUser();
  },
}
</script>

<style scoped>

</style>